<template>
	<view class="page">
		<topVue title="客服"></topVue>
		<view class="tipVue padding-row30 flex align-center">
			<image src="../../static/index/time.png" style="width: 32rpx; height: 32rpx;"></image>
			<text style="color: #fff; font-weight: 600;">人工服务时间：09:00-22:00</text>
		</view>
		
		<image src="../../static/help.png" style="width: 200rpx; height: 200rpx;" class="fixed-auto" v-if="isEmpty"></image>
			
		<view class="box">
			<scroll-view scroll-y="true" class="scrollVue" 
			:scroll-into-view="place" 
			:scroll-with-animation="false">
				<view class="item margin30" v-for="(item, index) in list" :key="index">
					<template v-if="item.senderType===2">
						<view class="flex">
							<view class="icon relative">
								<image src="../../static/service.png" style="width: 62rpx; height: 62rpx; border-radius: 50%;" class="absolute-auto"></image>
							</view>
							<view class="rightVue">
								<view class="name">九玖商城</view>
								<view class="content" v-if="item.contentType===1">{{JSON.parse(item.content).text}}</view>
								<view class="imgVue" v-if="item.contentType===2" @click="$tools.openimg(JSON.parse(item.content).picUrl)">
									<image :src="JSON.parse(item.content).picUrl" mode="widthFix" style="width: 200rpx;"></image>
								</view>
							</view>
						</view>
					</template>
				<!-- 	<template v-if="item.side===1">
						<view class="productVue flex margin0">
							<image src="../../static/bg.png" style="width: 100rpx; height: 100rpx;border-radius: 15rpx;"></image>
							<view class="flex-1" style="padding-left: 20rpx;">
								<view class="name">智能手表 2024新款</view>
								<view class="price">￥229</view>
							</view>
						</view>
					</template> -->
					<template v-if="item.senderType===1">
						<view class="flex-end">
							<view class="leftVue flex-column align-end">
								<view class="name">{{user.nickname}}</view>
								<view class="content">{{item.content}}</view>
							</view>
							<view class="icon relative">
								<u-avatar :src="user.avatar" size="62" class="absolute-auto"></u-avatar>
								<!-- <image :src="user.avatar" style="width: 62rpx; height: 62rpx; border-radius: 50%;" class="absolute-auto"></image> -->
							</view>
						</view>
					</template>
				</view>	
				<view id="bottom"></view>
			</scroll-view>
		</view>
	
		<view class="botVue flex-between align-center padding-row30">
			<input type="text" placeholder="输入您的问题..." v-model="text"/>
			<image 
				src="../../static/index/send.png" 
				style="width: 40rpx; height: 40rpx; margin-left: 30rpx;"
				@click="sendFun()"
			></image>
			<image 
				src="../../static/index/pictrue.png" 
				style="width: 40rpx; height: 40rpx; margin-left: 30rpx;"
				@click="$u.toast('发送图片功能开发中')"
			></image>
			<image 
				src="../../static/index/order.png" 
				style="width: 40rpx; height: 40rpx; margin-left: 30rpx;"
				@click="$u.toast('发送订单功能开发中')"
			></image>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import { connectSocketInit, removeWebsocket } from '@/common/socket.js';
	export default {
		data(){
			return {
				text: "",
				list: [],
				place: "",
				isEmpty: false
			}
		},
		onLoad() {
			this.getHistoryList()
			connectSocketInit();
			this.getMessage()
		},
		onUnload() {
			removeWebsocket()
		},
		computed: {
			...mapState({
				user: state=> state.user
			})
		},
		methods: {
			getMessage() {
				uni.onSocketMessage(async (res) => {
					console.log(res,"ppp")
					let data = JSON.parse(res.data)
					let obj = JSON.parse(data.content)
					this.list.push(obj)
					this.toBottom()
				})
			},
			
			// 获取记录
			getHistoryList(){
				this.$request("/app-api/promotion/kefu-message/list", "GET", {
					limit: 100
				}).then(res=>{
					if(res.code===0) {
						console.log(res)
						this.list = res.data.reverse()
						this.isEmpty = this.list.length===0
						this.toBottom(this.list[0].content)
					}
				})
			},
			
			// 定位到消息最后一行
			toBottom() {
				this.place = ""
				this.$nextTick(() => {
					setTimeout(() => {
						this.place = "bottom"
					}, 200)
				})
			},
			
			// 发送消息
			async sendFun(){
				if(!this.text) return this.$u.toast("发送消息内容不能为空")
				const res = await this.$request("/app-api/promotion/kefu-message/send", "POST",{
					contentType: 1,
					content: this.text
				})
				if(res.code===0) {
					console.log(res)
					this.text = ""
					this.getHistoryList()
				}else{
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.tipVue {
		width: 100%;
		height: 60rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
	}
	
	.box {
		width: 750rpx;
		height: calc(100vh - var(--status-bar-height) - 180rpx);
		.scrollVue {
			width: 750rpx;
			height: calc(100vh - var(--status-bar-height) - 240rpx);
			box-sizing: border-box;
			padding: 30rpx;
			.icon {
				width: 88rpx;
				height: 88rpx;
				background: linear-gradient(to right, #1CC289, #60A5FA);
				border-radius: 50%;
			}
			.productVue {
				width: 520rpx;
				padding: 30rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
				.price {
					color: #1CC289;
					font-weight: 600;
					line-height: 1;
					
				}
			}
			.leftVue {
				flex: 1;
				padding-right: 20rpx;
				.name {
					color: #4B5563;
					line-height: 1;
					text-align: right;
				}
				.content {
					background: linear-gradient(to right, #1CC289, #60A5FA);
					margin-top: 20rpx;
					padding: 20rpx;
					line-height: 38rpx;
					border-radius: 12rpx;
					color: #fff;
					display: inline-block;
				}
			}
			.rightVue {
				flex: 1;
				padding-left: 20rpx;
				.name {
					color: #4B5563;
					line-height: 1;
				}
				.content {
					display: inline-block;
					background: #fff;
					margin-top: 20rpx;
					padding: 20rpx;
					line-height: 38rpx;
					border-radius: 12rpx;
					box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
				}
				.imgVue {
					width: 200rpx;
					padding-top: 20rpx;
				}
			}
		}
	}
	
	.botVue {
		width: 100%;
		height: 120rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		input {
			flex: 1;
			height: 80rpx;
			background: #f5f5f5;
			border-radius: 40rpx;
			font-size: 28rpx;
			display: block;
			padding-left: 20rpx;
		}
	}
</style>